import {Table, Button, Space} from 'antd';
import {EditOutlined, DeleteOutlined} from '@ant-design/icons';

import {Student} from "../services/types.ts";

interface StudentTableProps {
    data: Student[];
    loading: boolean;
    onEdit: (student: Student) => void;
    onDelete: (id: number) => void;
}

export const StudentTable = (
    {data, loading, onEdit, onDelete}: StudentTableProps
) => {
    const columns = [
        {title: "姓名", dataIndex: "name", ellipsis: true},
        {title: "学号", dataIndex: "student_id"},
        {title: "生日", dataIndex: "birthday"},
        {title: "班级", dataIndex: "class"},
        {
            title: '操作',
            width: 120,
            render: (_: any, record: Student) => (
                <Space size="small">
                    <Button
                        type="text"
                        icon={<EditOutlined/>}
                        onClick={() => onEdit(record)}
                    />
                    <Button
                        type="text"
                        danger
                        icon={<DeleteOutlined/>}
                        onClick={() => onDelete(record.id)}
                    />
                </Space>
            ),
        }]

    return (
        <Table
            rowKey="id"
            columns={columns}
            dataSource={data}
            loading={loading}
            pagination={{pageSize: 10}}
            bordered
            scroll={{x: "max-content"}}/>
    )
}